<template>
    <div>
        <el-dialog :title="specsInfo.isAdd ? '添加商品规格' : '编辑商品规格'" :visible.sync="specsInfo.isShow" center
            :before-close="cancel">
            <el-form :model="specsForm" :rules="rules" ref="specsRef">
                <el-form-item prop="specsname" label="规格名称" :label-width="formLabelWidth">
                    <el-input v-model="specsForm.specsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-for="(item, index) in attrsArr" label="规格属性" :label-width="formLabelWidth">
                    <el-input v-model="item.value" autocomplete="off" class="Input"></el-input>
                    <el-button v-if="index == 0" type="primary" @click="addAttrs">新增规格属性</el-button>
                    <el-button v-else type="warning" @click="delAttrs(index)">删除</el-button>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="specsForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { specsAdd, specsEdit, specsinfo } from '../../request/api'
import { mapActions } from 'vuex'
export default {
    props: ['specsInfo'],
    data() {
        return {
            attrsArr: [
                {
                    value: ''  //用于双向数据绑定
                }
            ],
            formLabelWidth: '120px',
            specsForm: {
                specsname: '', //规格名称
                attrs: '', //规格属性
                status: 1  //状态1正常2禁用
            },
            rules: {
                specsname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        ...mapActions({
            getSpecs: 'specs/getSpecsListAction',
            getCount: 'specs/getCountAction',
        }),
        // 添加attr事件
        addAttrs() {
            if (this.attrsArr.length > 6) {
                this.$message.warning('不能再添加了!!!!!!')
            } else {
                this.attrsArr.push({
                    value: ''
                })
            }
        },
        // 删除attr事件
        delAttrs(i) {
            this.attrsArr.splice(i, 1)
        },
        // 重置事件
        reset() {
            this.specsForm = {
                specsname: '', //规格名称
                attrs: '', //规格属性
                status: 1  //状态1正常2禁用
            }
            // 清空验证
            this.$refs.specsRef.resetFields()
            // 清空规格属性
            this.attrsArr = [
                {
                    value: ''
                }
            ]
        },
        // 回显事件(调用一条数据接口)
        lookUp(id) {
            specsinfo({ id }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    this.specsForm = res.list[0]
                    this.specsForm.id = id
                    /*数据回显  后端返回的是数组形式  前端需要的格式是
                    数组套对象*/
                    this.specsForm.attrs.map((item, index) => {
                        if (index == 0) {
                            this.attrsArr[0].value = item
                        } else {
                            this.attrsArr.push({
                                value: item
                            })
                        }
                    })
                }
            })
        },
        // 取消事件
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 添加商品规格事件
        confirm() {
            this.$refs.specsRef.validate((val) => {
                if (val) {
                    /*规格属性的数据格式为数组套对象  后端需要的数据为字符串 要先转化*/
                    // 通过数组map方法进行映射 然后join转字符串
                    this.specsForm.attrs = this.attrsArr.map(item => item.value).join(',')
                    if (this.specsInfo.isAdd) {
                        // console.log(this.specsForm);
                        // specsAdd(this.specsForm).then(res=>{

                        //     if(res.code==200){
                        //         console.log(res);
                        //         this.$message.success(res.msg)
                        //         this.cancel()
                        //     }else{
                        //         this.$message.error(res.msg)
                        //     }
                        // })
                        specsAdd(this.specsForm).then(res => {
                            console.log(this.specsForm);
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                // 添加成功关闭弹框
                                this.cancel()
                                // 重新调用列表
                                this.getSpecs()
                                this.getCount()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        // 编辑
                        specsEdit(this.specsForm).then(res => {
                            console.log(this.specsForm);
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                // 添加成功关闭弹框
                                this.cancel()
                                // 重新调用列表
                                this.getSpecs()
                                this.getCount()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }else{
                    this.$message.error('验证失败')
                    return false
                }
            })
        }
    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped>
.Input {
    width: 65%;
}
</style>